<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>添加盘点单</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
	</head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="container">
                <div class="cell_box" style="width: 44.7vw;height: 400px;">
                    <div class="forms_box" style="height: 52px;">
                        <div class="forms_name">盘点单号</div>
                        <div class="forms_cont" style="color:#FA7355;">保存后自动生成</div>
                    </div>
                    <div class="forms_box" style="margin-bottom:20px;">
                        <div class="forms_name must_input">盘点日期</div>
                        <div class="forms_cont" style="max-width: 280px;">
                            <el-date-picker
                                v-model="addtime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                class="public_input"
                                placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="cell_title">
                        <div class="cell_name">附件:</div>
                        <div class="cell_but">
                            <el-upload
                                class="upload-demo"
                                action="##"
                                :show-file-list="false"
                                :http-request="fjhttprequest"
                                multiple>
                                <el-button class="border_but" type="primary">上传附件</el-button>
                            </el-upload>
                        </div>
                    </div>
                    <div class="cell_cont" style="height: calc(100% - 156px);padding: 2.77vh 2.08vw;">
                        <div class="table_box border_table_box">
                            <el-table :data="fileList" height="100%" border style="width: 100%">
                                
                                <el-table-column prop="filename" align="center" min-width="100" show-overflow-tooltip label="名称"></el-table-column>
                                
                                <el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人" min-width="70">
                                </el-table-column>
    
                                <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间" width="160">
                                </el-table-column>

                                <el-table-column align="center" show-overflow-tooltip label="操作" width="140">
                                    <template slot-scope="scope">
                                        <el-button @click="prevewImg(scope.row.filename, scope.row.fileurl)" type="text">查看</el-button>
                                        <el-button @click="downImg(scope.row.filename, scope.row.fileurl)" type="text">下载</el-button>
                                        <el-button @click="removeImg(fileList, scope.$index)" type="text">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="cell_box" style="width: 46.09vw;height: 400px;float: right;">
                    <div class="cell_title">
                        <div class="cell_name">盘点照片:</div>
                        <div class="cell_but"></div>
                    </div>
                    <div class="cell_cont" style="height: calc(100% - 52px);overflow: auto;padding-bottom: 20px;">
                        <div class="file_item">
                            <el-upload
                                action="##"
                                accept="image/*"
                                list-type="picture-card"
                                :show-file-list="false"
                                :http-request="zphttprequest"
                                multiple>
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <div class="file_item" v-for="(item, index) in pdimgList" :key="index" style="border: 2px solid #999999;">
                            <img :src="item.fileurl" alt="">
                            <div class="file_mask">
                                <div @click="prevewImg(item.filename, item.fileurl)" class="el-icon-zoom-in"></div>
                                <div @click="downImg(item.filename, item.fileurl)" class="el-icon-download" style="margin: 0 20px;"></div>
                                <div @click="removeImg(pdimgList, index)" class="el-icon-delete"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell_box" style="width: 100%;padding-top: 20px;height: calc(100% - 400px);min-height: 324px;">
                    <div class="cell_title">
                        <div class="cell_name">盘点明细:</div>
                        <div class="cell_but">
                            <el-select class="public_input" @change="ckChange" v-model="storageId" clearable placeholder="请选择">
                                <el-option
                                    v-for="item in cklist"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="cell_cont" style="height: calc(100% - 52px);padding: 2.77vh 2.08vw;">
                        <div style="padding-bottom: 10px;">
                            <el-button class="border_but" @click="chioceClmx" type="primary">新增</el-button>
                        </div>
                        <div class="table_box border_table_box" style="height: calc(100% - 42px);">
                            <el-table :data="clmxList" height="100%" border style="width: 100%">
                                
                                <el-table-column prop="materialName" align="center" min-width="100" show-overflow-tooltip label="名称"></el-table-column>
                                
                                <el-table-column prop="specsName" align="center" show-overflow-tooltip label="规格" min-width="70">
                                </el-table-column>
                                
                                <el-table-column prop="storage" align="center" show-overflow-tooltip label="账存数量" min-width="100">
                                </el-table-column>

                                <el-table-column align="center" show-overflow-tooltip label="盘点数量" width="160">
                                    <template slot-scope="scope">
                                        <div class="table_input" v-if="scope.row.isAdd">
                                            <el-input placeholder="请输入内容" type="number" v-model="scope.row.checkNum" clearable></el-input>
                                        </div>
                                        <span v-if="!scope.row.isAdd">{{scope.row.checkNum}}</span>
                                    </template>
                                </el-table-column>
    
                                <el-table-column prop="unit" align="center" show-overflow-tooltip label="单位" min-width="70">
                                </el-table-column>

                                <el-table-column align="center" show-overflow-tooltip label="操作" width="106">
                                    <template slot-scope="scope">
                                        <el-button @click="removeImg(clmxList, scope.$index, 1)" v-if="scope.row.isAdd" type="text">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="but_box">
				<el-button class="cancelClass" @click="cancels">取消</el-button>
				<el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
            </div>
            <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
                <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
            </ul>
        </div>
        <script src="../js/FileSaver.js"></script>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        value1: '',
                        fileList: [],
                        clmxList: [],
                        pdimgList: [],
                        previewList: [],
                        cklist: [],
                        projectId: '',
                        storageId: '',
                        storageName: '',
                        addtime: '',
                        clkcObj: {}
					};
				},
				methods: {
                    ckChange (val) {
                        for (var i = 0; i < this.cklist.length; i++) {
                            if (this.cklist[i].id == val) {
                                this.storageName = this.cklist[i].name
                            }
                        }
                        this.getClkc()
                    },
                    cancels () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    confirms () {
                        var that = this
                        if (!this.addtime) {
                            this.$message({
                                message: '请选择盘点日期',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (that.clmxList.length == 0) {
                            this.$message({
                                message: '请新增盘点明细',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var jsonData = [{
                            storageId: that.storageId,
                            storageName: that.storageName,
                            MaterialDatas: that.clmxList
                        }]
                        var imageData = []
                        var fileData = []
                        if (this.pdimgList.length > 0) {
                            for (var i = 0; i < this.pdimgList.length; i++) {
                                imageData.push(this.pdimgList[i].fileid + ',' + this.pdimgList[i].filename)
                            }
                        }
                        if (this.fileList.length > 0) {
                            for (var i = 0; i < this.fileList.length; i++) {
                                fileData.push(this.pdimgList[i].fileid + ',' + this.pdimgList[i].filename + ',' + this.pdimgList[i].userName + ',' + this.pdimgList[i].uploadTime)
                            }
                        }
                        xLoading(true, '正在提交')
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/InventoryFinally',
                            data: {
                                addtime: that.addtime,
                                projectId: that.projectId,
                                imageData: imageData.join('|'),
                                fileData: fileData.join('|'),
                                jsonData: JSON.stringify(jsonData)
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: '已提交',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                    parent.layer.close(index);
                                }, 500)
                            }
                        });
                    },
                    chioceClmx () {
                        if (!this.storageId) {
                            this.$message({
                                message: '请选择仓库',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var that = this
                        var selectArr = []
                        for (var i = 0; i < this.clmxList.length; i++) {
                            selectArr.push({
                                materialId: this.clmxList[i].materialId,
                                specificationId: this.clmxList[i].specsId
                            })
                        }
                        parent.$('#publicValue').val('')
                        parent.layer.open({
                            type: 2,
                            title: '选择材料明细',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['52.08%', '64.81%'],
                            content: '../publicList/clmxList.html?projectId=' +  that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                            end: function() {
                                setTimeout(function () {
                                    if (parent.$('#publicValue').val()) {
                                        var newList = JSON.parse(parent.$('#publicValue').val())
                                        for (var i = 0; i < newList.length; i++) {
                                            that.clmxList.push({
                                                oper: 'add',
                                                isAdd: true,
                                                materialId: newList[i].materialId,
                                                materialName: newList[i].materialName,
                                                specsId: newList[i].specificationId,
                                                specsName: newList[i].specificationName,
                                                unit: newList[i].unit,
                                                storage: that.clkcObj[newList[i].materialId + '_' + newList[i].specificationId] ? that.clkcObj[newList[i].materialId + '_' + newList[i].specificationId] : 0,
                                                checkNum: that.clkcObj[newList[i].materialId + '_' + newList[i].specificationId] ? that.clkcObj[newList[i].materialId + '_' + newList[i].specificationId] : 0,
                                                storageId: that.storageId,
                                                storageName: that.storageName
                                            })
                                        }

                                    }
                                }, 10)
                            }
                        });
                    },
                    
                    fjhttprequest (file) {
                        this.uploadImg(file, 2)
                    },
                    zphttprequest (file) {
                        if (getFileType(file.file.name) != 'IMG') {
                            this.$message({
                                message: '只能上传图片',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        this.uploadImg(file, 1)
                    },
                    uploadImg (file, types) {
                        var that = this
                        xLoading(true, '正在上传')
                        var formData = new FormData();
						formData.append('files', file.file);
						$.ajax({
							type: 'post',
							url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
							data: formData,
							dataType: 'json',
							contentType: false,
							processData: false,
							success: function(res) {
                                xLoading(false)
								if (!res.success) {
									that.$message({
										message: res.msg,
										type: 'error'
									});
									return false;
                                }
                                var newobj = {
                                    fileid: res.data.fileId,
                                    filename: res.data.fileName,
                                    fileurl: res.data.ossUrl,
                                    uploadTime: res.data.uploadTime,
                                    userName: res.data.userName
                                }
                                if (types == 1) {
                                    that.pdimgList.push(newobj)
                                }
                                if (types == 2) {
                                    that.fileList.push(newobj)
                                }
							}
						});
                    },
                    prevewImg (filename, urls) {
                        if (getFileType(filename) == 'IMG') {
                            this.previewList = [urls];
                            setTimeout(function () {
                                var viewer = new Viewer(document.getElementById('jq22'), {
                                    hide: function () {
                                        viewer.destroy();
                                    }
                                });
                                viewer.show();
                            }, 10);
                            return false
                        }
                        if (getFileType(filename) == 'PDF') {
                            parent.layer.open({
                                type: 2,
                                title: 'pdf预览',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['98%', '98%'],
                                content: '../pdf/web/viewer.html?file=' + encodeURIComponent(urls),
                                end: function () { }
                            });
                            return false
                        }
                        publicdownFile(filename, urls)
                    },
                    downImg (filename, urls) {
                        publicdownFile(filename, urls)
                    },
                    removeImg (arr, index, types) {
                        var title = '此操作将永久删除该文件, 是否继续?'
                        if (types == 1) {
                            title = '此操作将永久删除该数据, 是否继续?'
                        }
                        this.$confirm(title, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            arr.splice(index, 1)
                        }).catch(function () {
                        });
                    },
                    getCkData () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetStorageInfos',
                            data: {
                                projectId: that.projectId,
                                isUse: '1'
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.storageId = res.data[0].id
                                that.storageName = res.data[0].name
                                that.cklist = res.data
                                that.getClkc()
                            }
                        });
                    },
                    getClkc () {
                        var that = this
                        that.clkcObj = {}
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetMaterialStock',
                            data: {
                                projectId: that.projectId,
                                storageId: that.storageId
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                for (var i = 0; i < res.data.length; i++) {
                                    that.clkcObj[res.data[i].materialid + '_' + res.data[i].specsid] = res.data[i].count
                                }
                            }
                        });
                    },
				},
				mounted() {
                    this.showApp = true;
                    this.projectId = getQuerys('projectId')
                    this.addtime = timeFormat(new Date())
                    this.getCkData()
				}
			});
		</script>
	</body>
	<style>
		.container {
            height: calc(100% - 70px);
            padding: 1.03vh 3.28vw 3.09vh;
            overflow: auto;
        }
        .cell_title {
            display: flex;
            align-items: center;
            padding: 10px 0;
            height: 52px;
        }
        .cell_but {
            padding-left: 10px;
        }
        .forms_box {
            display: flex;
            align-items: center;
        }
        .forms_name {
            padding-right: 10px;
            white-space: nowrap;
            width: 76px;
            text-align: right;
        }
        .cell_box {
            float: left;
        }
        .cell_cont {
            border: 1px solid #EBEBEB;
        }
        .border_table_box {
            height: 100%;
        }
        .file_item {
            margin-left: 20px;
            margin-top: 20px;
            width: 140px;
            height: 140px;
            overflow: hidden;
            border-radius: 5px;
            float: left;
            position: relative;
        }
        .el-upload--picture-card {
            width: 100%;
            height: 100%;
            border-color: #D6D6D6;
            background: #FAFBFC;
        }
        .file_item > div {
            width: 100%;
            height: 100%;
        }
        .file_mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .file_mask > div {
            font-size: 22px;
            color: #fff;
            cursor: pointer;
        }
        .file_item:hover .file_mask {
            opacity: 1;
        }
	</style>
</html>
